<!DOCTYPE html>
<html class="no-js " lang="zh-CN">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="dns-prefetch" href="https://dn-kdt-img.qbox.me/">
  <link rel="dns-prefetch" href="https://img.yzcdn.cn/">
  <link rel="dns-prefetch" href="https://b.yzcdn.cn/">
  <link rel="dns-prefetch" href="https://su.yzcdn.cn/">
  <link rel="dns-prefetch" href="https://h5.youzan.com/v2/">
  <link rel="dns-prefetch" href="https://h5.youzan.com/">
  <meta name="keywords" content="有赞,移动电商服务平台">
  <meta name="description" content="有赞是帮助商家在微信上搭建微信商城的平台，提供店铺、商品、订单、物流、消息和客户的管理模块，同时还提供丰富的营销应用和活动插件。">
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="format-detection" content="telephone=no">
  <meta http-equiv="cleartype" content="on">
  <link rel="shortcut icon" href="https://b.yzcdn.cn/v2/image/yz_fc.ico">
  <title>分类</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <!--<link rel="stylesheet" href="./css/common.css">-->
  <!--<link rel="stylesheet" href="./css/category.css">-->
</head>

<body class=" " style="">
<div id="app">
  <div class="container with-bottom-nav" style="min-height: 667px; height: 667px;">
    <div class="custom-search js-search-bar">
      <form>
        <input type="search" class="custom-search-input" autocomplete="off" name="keyword" value=""
               placeholder="搜索更赞的商品" @click="goSearch">
        <span class="icon-custom-search"></span>
      </form>
      <button class="custom-search-type-selection-btn">商品</button>
      <span class="cancel">取消</span>
      <div class="search-type-dropdown-menu" style="display: none;">
        <span class="search-type-dropdown-menu-indicator">
            <i></i>
        </span>
        <div class="drop-menu-content">
          <div class="search-type-goods">
            <i class="icon-goods"></i>
            <span>商品</span>
          </div>
          <div class="search-type-dropdown-menu-divider"></div>
          <div class="search-type-shop">
            <i class="icon-shop"></i>
            <span>店铺</span>
          </div>
        </div>
      </div>
    </div>
    <div class="search-content" style="display: none;"></div>
    <div class="content" style="height: 617px;">
      <div class="class-nav">
        <div id="scroll-nav" style="height: 100%;">
          <ul class="nav" id="scroll-nav-content" style="height: 540px; transform: translate3d(0px, 0px, 0px);" >
            <li class="category-name js-category-name"
                v-for="(list,index) in topList"
                :class="{active: topIndex === index}"
                @click="topListHandle(index,list.id)"
                :data-cid="list.id">{{list.name}}</li>
          </ul>
        </div>
      </div>
      <div class="class-category">
        <div id="scroll-main-wrap" class="main-content">
          <div id="scroll-main-content" v-if="topIndex===0&&rankList" class="js-main-content inner-content">
            <div class="hot-wrap">
              <div class="hot-goods">
                <div class="hot-title">
                  <p class="pull-left">热销商品榜</p>
                  <a href="https://maijia.youzan.com/mars/rank/hotgoods" class="pull-right icon-right">更多</a>
                </div>
                <ul>
                  <li class="goods-item"
                    v-for="(list,index) in rankList.hotGoods"
                    :key="list.id"
                  >
                    <a
                      :href="'goods.html?id=' + list.id">
                      <div class="thumb badge center-img">
                        <img
                          :src="list.img">
                        <span class="num">{{index+1}}</span>
                      </div>
                      <div class="detail">
                        <div class="title">{{list.name}}</div>
                        <div class="price">￥{{list.price | currency}}</div>
                        <div class="recommend">
                          <span>推荐值:</span>
                          <span>{{list.recommend}}</span>
                        </div>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
              <div class="hot-shops" style="position: relative;">
                <div class="hot-title">
                  <p class="pull-left">TOP店铺榜</p>
                  <a href="https://maijia.youzan.com/mars/rank/hotshops" class="pull-right icon-right">更多</a>
                </div>
                <ul>
                  <li class="shop-item"
                    v-for="(list,index) in rankList.hotShops"
                  >
                    <div class="shop-title">
                      <span class="badge">{{index+1}}</span>
                      <a :href="list.clickUrl">{{list.name}}</a>
                      <span class="follows"> / 关注度: {{list.follows}}</span>
                    </div>
                    <ul class="shop-images" v-for="img in list.imgs">
                      <li>
                        <a href="https://h5.youzan.com/v2/showcase/homepage?kdt_id=10695955&amp;source=yzapp"><img
                          :src="img"></a>
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>
              <div class="hot-keywords">
                <div class="hot-title">
                  <p class="pull-left">热搜词排行</p>
                </div>
                <ul class="keywords-list">
                  <li v-for="list in rankList.hotKeywords">
                    <a href="javascript:;" class="js-hot-keyword">{{list}}</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div id="scroll-main-content2" v-if="topIndex!==0&&subList" class="js-main-content inner-content"
               style="height: 534px; transform: translate3d(0px, 0px, 0px);">
            <h3 class="category-title">热门品牌 </h3>
            <ul class="category-content">
              <li class="category-item js-category-item"
                  v-for="list in subList.brandList"
                  :data-item-id="list.id"
                  @click="toSearch(list)"
                  :data-item-name="list.name">
                <img
                  :src="list.img"
                  :alt="list.name" class="category-img">
                <span class="category-item-name">{{list.name}}</span>
              </li>
            </ul>
            <h3 class="category-title"> 热门分类 </h3>
            <ul class="category-content">
              <li class="category-item js-category-item"
                  v-for="list in subList.categoryList"
                  :data-item-id="list.id"
                  @click="toSearch(list)"
                  :data-item-name="list.name">
                <img
                  :src="list.img"
                  :alt="list.name" class="category-img">
                <span class="category-item-name">{{list.name}}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <Foot :active-index="1"></Foot>
</div>
</body>

</html>
